// 故障业务
<template>
  <div>
    <el-dialog
      v-el-drag-dialog="{updataFull, updataDialogWidth}"
      :fullscreen="isfullscreen"
      :title="$t('FAULT_SERVICE')"
      :visible="dialogVisible"
      :width="setDialogWidth('1200px')"
      class="BusinessList-dialog"
      @close="close"
    >
      <div class="flex-column">
        <template v-if="nodes.length > 0">
          <vis-view
            id="faultBusinessTopo"
            :nodes="nodes"
            :edges="edges"
            :show-eagel-eye="false"
            @selectEdge="selectEdge"
            @selectNode="selectNode"
          />
        </template>
        <div v-if="!loading && nodes.length < 1" class="flex align-center h-100 justify-center">
          {{ $t('NO_DATA') }}
        </div>
      </div>
    </el-dialog>
    <!-- 通道列表 -->
    <segment-detail
      :visible="showSegment"
      :row-data="rowData"
      show-type="restore"
      @restore="restore"
      @close="showSegment = false"
    />
  </div>
</template>
<script>
  import TopoPositionApi from '@/api/oen/TopoPositionApi'
  import { formatEdges, formatNodes } from '@/views/module/home/components/vis/js/format'
  import VisView from '@/views/module/home/components/vis'
  import SegmentDetail from '@/views/module/business/manager/SegmentDetail'

  export default {
    components: {
      VisView,
      SegmentDetail
    },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      node: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        loading: true,
        rowData: {},
        showSegment: false,
        goBackPath: '',
        nodes: [],
        edges: []
      }
    },
    mounted() {
      this.node.nodeId && this.getTopos()
      console.log(this.node)
    },
    methods: {
      getTopos() {
        this.nodes = []
        this.edges = []
        TopoPositionApi.getDamageBizToposByRegion({
          regionId: this.node.nodeId
        })
          .then(res => {
            this.loading = false
            if (res && res.nodes) {
              this.nodes = formatNodes(res.nodes)
            }
            if (res && res.edges) {
              this.edges = formatEdges(res.edges)
            }
          })
          .catch(err => {
            this.loading = false
            console.log(err)
          })
      },
      // 连线点击事件弹出故障业务详情
      selectEdge(obj) {
        if (obj.mouseStatus === 'CANCEL') return
        const edgeData = this.edges.find(i => i.id === obj.id)
        this.rowData = {
          bizId: edgeData.bizId || '',
          bizName: edgeData.label
        }
        this.showSegment = true
      },
      selectNode(obj) {
        console.log(obj)
      },
      // 智能恢复
      restore(data) {
        this.close() // 关闭topo图弹窗
        this.showSegment = false // 关闭通道弹窗
        this.$emit('restore', {
          bizData: {
            ...this.rowData,
            channelList: data,
            startStationName: this.node.label, // 发生故障的站点
            functionName: 'topo' // 操作日志需要传此类型，判断是topo还是业务管理里执行的恢复
          },
          operateType: 'restore'
        })
      },
      close() {
        this.$emit('update:dialogVisible', false)
      },
      goBack() {
        this.$router.push({
          path: this.goBackPath
        })
      }
    }
    // beforeRouteEnter(to, from, next) {
    //   next(vm => {
    //     if (from.name === 'MENU_TOPO') {
    //       // 从拓扑展示跳转过来
    //       vm.goBackPath = '/info/topo'
    //     } else if (from.name === 'MENU_BUSINESS_TOPO') {
    //       // 从业务拓扑跳转过来
    //       vm.goBackPath = '/business/topo'
    //     }
    //   })
    // }
  }
</script>
<style lang="scss">
  .BusinessList-dialog .el-dialog__body {
    height: 50vh;
  }
</style>
